<template>
    <div class="view">
        <div class="head">
            <span>分销商列表>分销商详情>下线列表</span>
        </div>
        <div class="head-a">
            <div class="head-a-x">
                <div>
                    <img :src="cxia.imgurl" alt="">
                </div>
                <span>{{ cxia.name}}</span>
            </div>
            <div class="head-a-y">
                <span>一级下线数 </span>
                <span class="zi">{{cxia.count}}</span>
            </div>
        </div>
        <div class="views">
            <!-- <div class="viewsousuo">
                <div class="viewsousuo-x">
                    <span>下线搜索</span>
                    <input type="text" placeholder="输入用户昵称搜索">
                </div>
                <div class="viewsousuo-y">
                    <span>下级类型</span>
                    <select id="sel" placeholder="请选择" v-model="value2">
                        <option value="分销商">分销商</option>
                        <option value="普通下线">普通下线</option>
                    </select>
                </div>
            </div> -->
            <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border style="width: 100%">
                <el-table-column label="用户" width="180" align="center">
                    <template #default="scope">
                        <div class="fromhead">
                            <span>{{ scope.row.username }}</span>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="grade" label="下级类型" align="center" /> -->
                <el-table-column prop="lever" label="分销商等级" align="center" />
                <el-table-column prop="costMoneyCount" label="分销商品金额(元)" align="center" />
                <el-table-column prop="getMoneyCount" label="贡献佣金金额(元)" align="center" />
                <el-table-column prop="registerTime" label="成为下线时间" align="center" />
                <el-table-column fixed="right" label="operate" width="150" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="diashow(scope.row)">解除关系</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页 -->
            <el-pagination :disabled="false" :background="true" layout="prev, pager, next, jumper"
                :current-page.sync="currentPage" :page-size="pagesize" :total="Total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <!-- 解除关系模态框 -->
        <el-dialog
            v-model="dialogVisible"
            title="警告框"
            width="30%"
            
        >
            <span>是否确认解除关系</span>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="queren">
                确认
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, reactive, toRefs, toRaw} from 'vue';
import zhCn from "element-plus/es/locale/lang/zh-cn"
import nuser from '@/service/user';
import { useRoute } from 'vue-router';
import { ElMessageBox } from 'element-plus'


const route=useRoute()
const value2 = ref('普通下线')
const pagesize = ref(5) //每页显示多少条
const currentPage = ref(1) //当前是第几页
const Total = ref() //总条数
const id=ref()//用户的id
let jieid=1//解除关系用的id

// 模态框
const diashow=((obj:any)=>{
    dialogVisible.value=true
    let a = toRaw(obj) //将proxy对象转为普通对象
    jieid=toRaw(obj).userId
    
    
})
const dialogVisible = ref(false)

// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//     })
// }
// 修改分页器默认文字
zhCn.el.pagination.goto='aaa'


// 表头的数据
const cxia=ref({
    count:'',
    imgurl:'',
    name:''
})
// 表格

const tableData1 = reactive({tableData:
    {
        nickname: "暴走的王",//昵称
        img: "郫县",//图片地址
        id: '1',
        name: '八蛋',
        phone: "18045276533",
        information: '12987122',
        grade: '白银',
        inviter: '雨神',
        salesAmount: 2320,
        lMonoey: 0,
        Offline: 0,
        accumulate: 0,
        state: '待审核',
        time: '2020.05.12 09:23',//成为下线时间
        lei: "分销商", //分销商类型
        fmoney: '2960.22',//分销商品金额(元)
        gmoney: "252.00"//贡献佣金金额(元)
    }
})
const {tableData}=toRefs(tableData1)
// // 解除关系按钮
// const secure = ((obj: any) => {
//     console.log(obj);

// })
// 解除关系确认按钮
const queren=(()=>{
    console.log(typeof jieid);
    
    nuser.deletfenxia(jieid).then((res:any)=>{
        console.log(res);
        let a=res.data.data
    })
})
// 分页
const handleSizeChange = (val: number) => {
    pagesize.value = val
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}
onBeforeMount(() => {
    // Total.value=Number(Math.ceil(tableData.length/pagesize.value)+'0') //初始化更新分页总数
    Total.value = Number(tableData1.tableData.length) //初始化更新分页总数
    id.value=route.query.id
    cxia.value.count=route.query.count
    cxia.value.imgurl=route.query.imgurl
    cxia.value.name=route.query.name
    nuser.idfenxia(id.value,0,5,0).then((res:any)=>{
        // console.log(res);
        let a=res.data.data
        for(let b of a){
        if(b.costMoneyCount==null){
            b.costMoneyCount=0
        }
        if(a.getMoneyCount==null){
            b.getMoneyCount=0
        }
        if(a.registerTime==null){
            b.registerTime='无'
        }
        }
        tableData1.tableData=a
    })
    
})
</script>

<style scoped lang="less">
.view {
    width: 100%;
    height: 100%;
}

.head {
    width: 100%;
    height: 40px;
    background-color: white;

    span {
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}

.head-a {
    width: 100%;
    height: 120px;
    background-color: white;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    align-items: center;
}

.head-a-x {
    width: 200px;
    height: 100%;
    border-right: 1px solid #cccccc;
    display: flex;
    align-items: center;
    font-size: 14px;

    div {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
        font-size: 12px;
        img{
        width: 35px;
        height: 35px;
        border-radius: 50%;
        }
    }
}

.head-a-y {
    margin-left: 30px;
    font-size: 14px !important;
}

.zi {
    color: #ed742f;
}

// 表格内容
.views {
    width: 100%;
    height: 537px;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px;
    margin-top: 10px;
}

.viewsousuo {
    display: flex;
}
.fromhead{
  display: flex;
  font-size: 12px;
  align-items: center;
  justify-content: center;
}
.fromhead-x{
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}
.el-table{
    margin-top: 20px;
}
// 分页
.el-pagination{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
// 搜索框
.viewsousuo-x{
    span{
        margin-right: 10px;
    }
    input{
        width: 194px;
        height:25px;
        padding-left: 10px;
        margin-right: 40px;
        border-radius: 5px;
        border: 1px solid black;
    }
}
.viewsousuo-y{
    select{
        width: 200px;
        height: 29px;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: 10px;
    }
}
// 模态框
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>